<script setup lang="ts">
import { ref } from 'vue'
import { useSearchHistoryStore } from '@/stores/modules/searchHistory'
import {useRouter} from 'vue-router'
const router = useRouter()

const props = defineProps({
  close:{
    type:Function,
      default: ()=>{}
  }
})

const emit = defineEmits(['update:search'])

const hotList = ref([
  {
    name: "姑娘别哭泣",
    hot: "709万"
  },
  {
    name: '如果这就是爱情',
    hot: '523万'
  },
  {
    name: '原神',
    hot: '338万'
  },
  {
    name: '瞬',
    hot: '338万'
  },
  {
    name: 'Dino',
    hot: '298万'
  },
  {
    name: '冷战',
    hot: '211万'
  },
  {
    name: '悬溺',
    hot: '204万'
  },
  {
    name: '时代少年团',
    hot: '175万'
  },
  {
    name: '英雄联盟',
    hot: '164万'
  },
  {
    name: '奢香夫人',
    hot: '142万'
  }
])

const searchHistory = useSearchHistoryStore()

const handleSearch = (name: string)=>{
  emit('update:search', name)
  props.close()
  router.push("/search/songs/" + name)

}



</script>

<template>
<div class="box">
  <div class="header">
    <div>热门搜索</div>
    <div><span>搜索历史</span><a href="javascript:(void 0)" @click.stop="searchHistory.clearSearchHistory()">清空</a></div>
  </div>
  <hr />
  <div class="body">
    <div class="hot">
      <ul>
        <li @click.prevent="handleSearch(item.name)"
            v-for="item in hotList"
            :key="item.name"
            :value="item.name">
          <a><span>{{item.name}}</span><span>{{item.hot}}</span></a>
        </li>
      </ul>
    </div>
    <div class="history">
      <ul>
        <li @click.prevent="handleSearch(item.name)"
            v-for="item in searchHistory.searchHistoryList"
            :key="item.name" :value="item.name">
          <a>{{item.name}}</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
.box{
  width: 471px;
  //height: 360px;
  background-color: #fff;
  border-radius: 8px;
  padding: 0 9px 0 9px;
  box-shadow: grey 1px 1px 8px;

  .header{
    display: flex;
    height: 42px;
    line-height: 42px;
    padding: 0;
    font-size: 14px;
    color: #000;

    div{
      width: 50%;


      &:nth-child(1){
        border-right: 1px solid #eee;
        padding-left: 16px;
      }

      &:nth-child(2){
        display: flex;
        justify-content: space-between;
        padding: 0 16px 0 16px;
      }

      a{
        text-decoration: none;
        color: #808080;
      }

    }
  }

  hr{
    border-color: #eee!important;
    border-bottom: 0;
    border-style: solid;
  }

  .body {
    display: flex;
    height: 100%;
    width: 100%;
    font-size: 14px;

    ul{
      width: 226px;
      display: flex;
      flex-direction: column;
      //padding-left: 16px;
      padding: 0;

      li a{
        display: flex;
        justify-content: space-between;
        height: 28px;
        line-height: 28px;
        padding-right: 9px;
        padding-left: 14px;
        color: #000;
        &:hover{
          background-color: #f3f3f3;
        }
      }
    }
    div{
      display: flex;
      padding: 4px 0 4px 0;
      //height: 100%;

      &:nth-child(1){
        border-right: 1px solid #eee;
      }
    }
  }

}


</style>